<template>
    <view class="uni-shadow item" @tap.stop="detail">
        <u-row class="u-flex u-flex-wrap">
            <u-col v-for="(item,index) in list" :key="index" :span="item.span" 
                :class="['u-font-26','col',index==0?'u-m-b-10':'u-m-t-20']">
                <text :class="['u-m-r-20','u-line-1',index==0?'u-font-28 font-bold':'uni-dec-color']" 
                    @longtap="longTap(item.title)">
                    {{item.title}}
                </text>
                <uni-phone v-if="item.type=='phone'" :phone="item.value" :size="13" />
                <text v-else class="u-line-1" @longtap="longTap(item.value)"
                    :style="{maxWidth:item.span==12?'80%':'45%'}" >
                    {{item.value}}
                </text>
            </u-col>
        </u-row>
        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>

</template>


<script>
export default {
    name: 'projectItem',
    title: '项目列表',
    props:{
        listItem:{
            type: Object,
            default(){
                return {}
            }
        }
    },

    data(){
        return {
            list: [
                // 原数据 据(基础信息优化工作20220326_APP优化)文档修改
                // { fied:'xmmc', title:'项目名称', value:'' },
                // { fied:'constructionname', title:'施工单位', value:'暂无数据源' },
                // { fied:'xmdz', title:'项目地址', value:'暂无数据源' },
                // { fied:'xmtype', title:'项目类型', value:'暂无数据源' },
                // { fied:'districtName', title:'所属区划', value:'暂无数据源' },
                // { fied:'jsjd', title:'工程进度', value:'暂无数据源' },
                // { fied:'contactname', title:'项目负责人', value:'暂无数据源' },
                // { fied:'contactphone', title:'联系电话', value:'暂无数据源', type:'phone' },
                { fied:'xmmc', title:'项目名称', span:12,  value:'' },
                { fied:'xmtype', title:'行业主管部门', span:6,  value:'安薪乐' },
                { fied:'tzlx', title:'项目种类', span:6,  value:'安薪乐' },
                { fied:'jsjd', title:'工程进度', span:6,  value:'安薪乐' },
                { fied:'districtName', title:'所属兵团辖区', span:6,  value:'安薪乐' },
                { fied:'constructionxmjlname', title:'项目经理', span:6,  value:'安薪乐' },
                { fied:'constructionxmjllxdh', title:'联系电话', span:6,  value:'安薪乐', type:'phone' },
                { fied:'xmdz', title:'项目地址', span:12,  value:'安薪乐' },
            ]
        }
    },

    created() {
        // 处理数据
        this.list.map((v,i)=>{
            for(let key in this.listItem){
                if( v.fied == key ){
                    if( v.fied == 'xmmc' ){
                        v.title = this.listItem[key]?this.listItem[key]:'暂无数据源'
                    }else{
                        v.value = this.listItem[key]?this.listItem[key]:'暂无数据源'
                    }
                }
            }
        })
    },

    methods: {
        // 长按事件
        longTap(value){
            this.$refs.uToast.show({
                message: value,
                type: 'default',
                duration: 3000
            })
        },

        // 详情
        detail(){
            uni.navigateTo({
                url: '/pages/project-bag/detail?id='+this.listItem.id
            })
        }
    },
}
</script>


<style scoped lang="scss">
    .item{
        .col{
            flex-direction: row;
        }
    }
</style>